<template>
  <div class="main">
    <div class="form_content">
      <NScrollbar>
        <NSpin :show="spinShow">
          <div class="content">
            <div class="topTitle">考核单</div>
            <div class="basin-info">
              <div class="basin-left">
                <div class="box">
                  <span>考核名称：</span>
                  <span>{{ ApproveInfo.assessName }}</span>
                </div>
                <div class="box">
                  <span>考核时间：</span>
                  <span>{{ ApproveInfo.createTime }}</span>
                </div>
              </div>
              <div class="basin-left">
                <div class="box">
                  <span>考核人数：</span>
                  <span>{{ ApproveInfo.num }}</span>
                </div>
                <div class="box" v-if="ApproveInfo.fileList?.length">
                  <span>附件：</span>
                  <VAttachments :attach-list="ApproveInfo.fileList"></VAttachments>
                </div>
              </div>
              <div class="basin-right">
                <div class="box">
                  <span>考核状态：</span>
                  <span>{{ ApproveInfo.submitStatus }}</span>
                </div>
              </div>
            </div>
            <div class="topTitle">考核成员</div>
            <div class="table">
              <NDataTable :bordered="false" :columns="columnsPeople" :data="tableDataPeople" :pagination="false" striped
                :rowKey="rowKey" max-height="250" />
              <NPagination :page-sizes="paginationReactive.pageSizes" style="margin-top: 15rem"
                :item-count="paginationReactive.itemCount" :page="paginationReactive.page"
                :page-size="paginationReactive.pageSize" @update:page="paginationReactive.onChange"
                @update:page-size="paginationReactive.onUpdatePageSize" show-size-picker show-quick-jumper
                :suffix="() => '页'">
                <template #prefix>
                  <span style="font-size: 14px">共{{ paginationReactive.itemCount }}条</span>
                </template>
              </NPagination>
            </div>
            <div class="topTitle" style="border-top: 1px dashed #bc9e70; padding-top: 15rem">
              流程记录
            </div>
            <div class="table">
              <NDataTable :bordered="false" :columns="columns" :data="tableData" :pagination="false" striped
                :rowKey="rowKey" max-height="250" />
              <NPagination :page-sizes="paginationReactivePeople.pageSizes" style="margin-top: 15rem"
                :item-count="paginationReactivePeople.itemCount" :page="paginationReactivePeople.page"
                :page-size="paginationReactivePeople.pageSize" @update:page="paginationReactivePeople.onChange"
                @update:page-size="paginationReactivePeople.onUpdatePageSize" show-size-picker show-quick-jumper
                :suffix="() => '页'" />
            </div>
          </div>
        </NSpin>
      </NScrollbar>
    </div>
  </div>

  <FixedAction>
    <div style="display: flex">
      <NSpace justify="start" style="flex: 0 0 42%">
        <NButton style="width: 78px; color: #5fb17f" ghost @click="goBack">
          <template #icon>
            <img :src="VBackImg" style="width: 25rem; height: 25rem" />
          </template>
          返回
        </NButton>
      </NSpace>

      <NSpace justify="center">
        <NButton type="primary" style="background-color: #5faab1;" :loading="fileLoading" @click="handleFile">
          归档
        </NButton>
        <NButton type="primary" @click="handleExportAll" :loading="exportLoading">
          导出
        </NButton>
      </NSpace>
    </div>
  </FixedAction>

  <NModal :auto-focus="false" v-model:show="contentVisible" @close="contentVisible = false">
    <VDialogContent @close="contentVisible = false" @submit="submit" title="保存提示">
      <div style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem">
        {{ contentContent }}
      </div>
    </VDialogContent>
  </NModal>
</template>

<script setup lang="ts">
import {
  NSpace,
  NButton,
  NScrollbar,
  NDataTable,
  useMessage,
  NSpin,
  NImage,
  NPagination,
  NModal
} from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import router from '@/router'
import { useRoute } from 'vue-router'
import { ref, watch, h, reactive } from 'vue'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import VAttachments from '@/views/OA/Common/Attachments.vue'
import VBackImg from '@/assets/images/back.png'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'

const tags = useTagStore().tags
const route = useRoute()
const message = useMessage()

const rowKey: any = (row: any) => row.id || ''
const columns: DataTableColumns = [
  {
    title: '序号',
    key: 'orderIndex',
    render: (_, i) => {
      return ++i + (paginationReactive.page - 1) * paginationReactive.pageSize
    },
    width: '60',
    align: 'center'
  },
  {
    title: '操作人员',
    key: 'userName',
    width: 50
  },
  {
    title: '记录时间',
    key: 'time',
    width: 50
  },
  {
    title: '记录操作',
    key: 'operation',
    width: 100
  },
  {
    title: '备注',
    key: 'updateTime',
    width: 150
  }
]
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactivePeople.page = page
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactivePeople.pageSize = pageSize
    paginationReactivePeople.page = 1
  }
})
const columnsPeople: DataTableColumns = [
  {
    title: '序号',
    key: 'orderIndex',
    render: (_, i) => {
      return ++i + (paginationReactivePeople.page - 1) * paginationReactivePeople.pageSize
    },
    width: '60',
    align: 'center'
  },
  {
    title: '考核姓名',
    key: 'userName',
    width: 50
  },
  {
    title: '考核部门',
    key: 'assessDeptId',
    width: 50
  },
  {
    title: '职位',
    key: 'duty',
    width: 100
  },
  {
    title: '当前状态',
    key: 'result',
    width: 50
  },
  {
    title: '评级',
    key: 'grade',
    width: 150
  },
  {
    title: '提交时间',
    key: 'createTime',
    width: 150
  },
  {
    title: '操作',
    key: 'action',
    width: '80',
    fixed: 'right',
    render: (row: any) => [
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          onClick: () => handleDetail(row?.id)
        },
        {
          default: () => '详情'
        }
      ),
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          style: {
            display:
              row.submitStatusCode == 'A0705' || row.submitStatusCode == 'A0706'
                ? 'inline-flex'
                : 'none'
          },
          onClick: () => handleExport(row?.id)
        },
        {
          default: () => '导出'
        }
      )
    ]
  }
]
const paginationReactivePeople = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactivePeople.page = page
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactivePeople.pageSize = pageSize
    paginationReactivePeople.page = 1
  }
})

//考核成员详情
const handleDetail = (val: any) => {
  console.log(val)
  router.push({
    path: '/OA/Examination/MemberDetail',
    query: {
      id: val
    }
  })
}

//导出
function download(headers: any, data: any, name?: string) {
  const val = headers['content-disposition']?.match(/(?<=filename=)(.*)/)
  let filename = val ? decodeURIComponent(val[0]) : name + '.xlsx'
  if (!filename.includes('xlsx')) {
    filename = filename.replace('xls', 'xlsx')
  }
  const a = document.createElement('a')
  let binaryData = []
  binaryData.push(data)
  a.href = window.URL.createObjectURL(new Blob(binaryData))
  a.download = filename
  a.click()
  window.URL.revokeObjectURL(a.href)
}
const exportLoading = ref(false)
async function handleExport(val: any) {
  exportLoading.value = true
  const [error, data, headers] = await sendRequest({
    module: 'exam',
    api: 'sendMemberExport',
    override: {
      params: {
        assessPersonId: val?.id
      }
    }
  })
  if (error) return message.error(error.message)
  download(headers, data, '成员考核数据')
  exportLoading.value = false
}

// 确定
const contentVisible = ref(false)
const contentContent = ref()
const submit = (flag: any) => {
  contentContent.value = flag ? '您确定要提交吗?' : '您确定要返回流程吗?'
  contentVisible.value = true
}

//归档
const fileLoading = ref(false)
const handleFile = async () => {
  fileLoading.value = true
  const [error, res] = await sendRequest({
    module: 'exam',
    api: 'sendItemFile',
    override: {
      params: {
        assessId: route.query.id
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) message.error(res.msg)
  fileLoading.value = false
}

//导出-low
async function handleExportAll() {
  exportLoading.value = true
  const [error, data, headers] = await sendRequest({
    module: 'exam',
    api: 'sendMemberExport',
    override: {
      params: {
        assessId: route.query.id
      }
    }
  })
  if (error) return message.error(error.message)
  download(headers, data, '成员考核数据')
  exportLoading.value = false
}

// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)

  tags.splice(index, 1)
  if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}
// 获取详情
const tableData = ref([])
const tableDataPeople = ref([])
const spinShow = ref(false)
const ApproveInfo = ref<any>({})
const getApproveInfo = async () => {
  spinShow.value = true
  const [error, res] = await sendRequest({
    module: 'exam',
    api: 'sendItem',
    override: {
      params: {
        assessId: route.query.id as never
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  ApproveInfo.value = res.data || []
  tableData.value = ApproveInfo.value.assessProcessList || []
  tableDataPeople.value = ApproveInfo.value.assessPersonList || []
  spinShow.value = false
}

watch(
  () => route,
  () => {
    if (route.path == '/OA/Examination/SendDetail' && route.query.id) {
      getApproveInfo()
    }
  },
  { deep: true, immediate: true }
)
</script>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 18rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .topTitle {
      font-size: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #5fb17f;
      margin-bottom: 10rem;
    }

    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem 33rem 120rem;
      overflow-y: scroll;
      background-color: #ebeceb;
      @include CommonFont;

      .basin-info {
        display: flex;
        width: 100%;
        height: auto;
        border-bottom: 1px dashed #bc9e70;
        margin-bottom: 10rem;

        .basin-left {
          flex: 0 0 30%;
        }

        .box {
          display: flex;
          align-items: center;
          margin-bottom: 10rem;
          font-size: 16rem;

          span:first-child {
            display: inline-block;
            width: 120rem;
            font-weight: bold;
            color: #333333;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          }

          span:last-child {
            display: inline-block;
            flex: 1;
            color: #55524f;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

          }
        }

        .box:last-child {
          margin-bottom: 20rem;
        }
      }

      .approve {
        display: flex;
        width: 100%;
        margin-bottom: 20rem;
        border-bottom: 1px dashed #bc9e70;

        .box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          min-width: 100rem;
          width: auto;
          height: 90rem;
          border-radius: 4px;
          border: 1px solid #d9d9d9;
          padding: 12rem;
          margin-right: 10rem;
          margin-bottom: 20rem;
        }
      }

      .table {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 15rem;
      }
    }
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
